<template>
	<view class="page">
		<q-navbar title="个人信息" :isBack="true" />
		<view class="page_container">
			<u-form :model="form" ref="uForm" label-width="150" :error-type="['message']">
				<u-form-item label="头像" prop="" borderBottom>
					<view slot="right" style="display: flex;">
						<q-upload ref="image" :formData="form" keyName="avatar" :maxSize="1" />
					</view>
				</u-form-item>
				<u-form-item label="昵称" prop="userName" borderBottom>
					<u-input v-model="form.userName" :border="false" placeholder='请输入' disabled
						inputAlign='right'></u-input>
				</u-form-item>
				<u-form-item label="姓名" prop="nickName" borderBottom>
					<u-input v-model="form.nickName" :border="false" placeholder='请输入' disabled
						inputAlign='right'></u-input>
				</u-form-item>
				<u-form-item label="性别" prop="sex" borderBottom>
					<q-dict v-model="form.sex" :type="sexlist" ref="sex" :dictClick='false' :arrow="false"
						valueName="typeId" labelName="typeName" />
				</u-form-item>
				<u-form-item label="学历" prop="education" borderBottom><q-dict v-model="form.education"
						:type="educationlist" ref="education" :dictClick='false' :arrow="false" valueName="typeId"
						labelName="typeName" />
					<view slot="right">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="毕业院校" prop="school" borderBottom>
					<u-input v-model="form.school" :border="false" placeholder='请输入' disabled
						inputAlign='right'></u-input>
				</u-form-item>
				<u-form-item label="手机号" prop="phonenumber" borderBottom>
					<u-input v-model="form.phonenumber" :border="false" placeholder='请输入' disabled
						inputAlign='right'></u-input>
				</u-form-item>
				<u-form-item label="住址" prop="address" borderBottom>
					<u-input v-model="form.address" :border="false" disabled placeholder='请选择'
						inputAlign='right'></u-input>
				</u-form-item>
				<u-form-item label="详细住址" prop="location" borderBottom>
					<u-input v-model="form.location" :border="false" placeholder='请输入' disabled
						inputAlign='right'></u-input>
				</u-form-item>
			</u-form>
		</view>
		<q-button name="退出" :isPosition="false" @submit="layout" />
	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {
				form: {},
				rules: {
					// 字段名称
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				},
				sexlist: [{
						typeName: '男',
						typeId: '0'
					},
					{
						typeName: '女',
						typeId: '1'
					},
				],
				educationlist: []
			}
		},
		watch: {},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {
			this.findType()
		},
		onShow() {
			this.findUser()
		},
		methods: {
			layout() {
				this.$store.dispatch('LogOut')
				this.$msg.default('退出成功！')
				this.router.push({
					path: '/pages/login/login'
				})
			},
			async findType() {
				let res = await this.$api.selectChildrenTypeById('lk2kzpnc-1ci5t8cp-hsvig5-0000001')
				this.educationlist = res.data
			},
			// 查用户头像
			async findUser() {
				let res = await this.$api.getInfo(this.$s.get('userId'))
				this.form = res.data
				if (!!res.data.avatar || res.data.avatar !== '') {
					// this.form.avatar = this.$img + res.data.avatar
					this.$refs.image.init(this.form.avatar)
				}
				if (res.data.education !== null) {
					let education = this.educationlist.filter(v => v.typeId == res.data.education)[0]
						.typeName
					this.$nextTick(() => {
						this.$refs.education.init(education)
					})
				}
				if (res.data.sex !== null) {
					this.$nextTick(() => {
						this.$refs.sex.init(this.form.sex == '0' ? '男' : this.form.sex == '1' ? '女' : '')
					})
				}
				this.$s.set('userInfo', res.data)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;

		.page_container {
			padding: 30rpx;
		}
	}
</style>